<template>
	<view>
		<!-- 导航栏 -->
		<view class="header">
			<view class="search-bar">
				<view class="search-input">
					<view class="search-icon"><image src="../../static/icon/search.png"></image></view>
					<view class="search-content">
						<input type="text" placeholder="请输入小区名或地址" @confirm="searchHome" v-model="content" placeholder-class="placeHolderClass" />
					</view>
					<view class="close-icon" v-if="content.length > 0" @click="clear"><image src="../../static/icon/close.png" mode=""></image></view>
				</view>
				<view class="findHome" @click="goMapSearch"><image src="../../static/icon/location-2.png"></image></view>
			</view>
			<!-- 条件搜索 -->
			<dropChoose :condition="tab" @region="regionChoose" @price="priceChoose" @type="typeChoose" @size="sizeChoose" @more="moreChoose" :hType="houseType" :areaId="area" :cityId="city"></dropChoose>
		</view>
		<!-- 住房列表 -->
		<mescroll-uni :down="downOption" @down="downCallback" :marginTop="top">
			<scroll-view class="homeList" scroll-y style="height: calc(100vh - 196rpx);" @scrolltolower="loadMore" v-if="!isEmpty">
				<view class="home-info" v-for="(item, index) in homeList" :key="index" @click="checkDetail(item.houseId)" v-if="houseType != 2">
					<view class="home-pic"><image :src="item.picUrl[0]" lazy-load="true"></image></view>
					<view class="home-detail">
						<view class="homeName">
							<text>{{ item.houseName }}</text>
						</view>
						<view class="home-address">
							<text space="nbsp">{{ item.provinceString }} |{{ item.areaName }}|{{item.buildNum}}栋{{item.roomNum}}</text>
						</view>
						<view class="home-tips">
							<view :class="[{ 'tips-1': labIndex == 0, 'tips-2': labIndex == 1, 'tips-3': labIndex == 2 }]" v-for="(it, labIndex) in item.label" :key="labIndex">
								<text>{{ it }}</text>
							</view>
						</view>
						<view class="home-price" v-if="houseType == 1">
							<text>{{ item.price }}万({{ item.acreage }}m²|{{ item.unitPrice }}元/m²)</text>
						</view>
						<view class="home-price" v-if="houseType == 3">
							<text>{{ item.rental }}元/月({{ item.acreage }}m²)</text>
						</view>
					</view>
				</view>
				<view class="home-info" v-for="(item, index) in homeList" :key="index" v-if="houseType == 2" @click="checkDetail(item.areaId)">
					<view class="home-pic"><image :src="item.picUrl[0]" lazy-load="true"></image></view>
					<view class="home-detail">
						<view class="homeName">
							<text>{{ item.areaName }}</text>
						</view>
						<view class="home-address">
							<text space="nbsp">{{ item.provinceString }}</text>
						</view>
						<view class="home-tips">
							<view :class="[{ tips4: labIndex == 0, tips5: labIndex !== 0 }]" v-for="(it, labIndex) in item.label" :key="labIndex">
								<text>{{ it }}</text>
							</view>
						</view>
						<view class="home-price">
							<text>{{ item.price }}元/m²(楼盘均价)</text>
						</view>
					</view>
				</view>
				<!-- 加载 -->
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
			</scroll-view>
			<view v-if="isEmpty" class="noData">
				<view class="nodata-img"><image src="../../static/icon/nodata.png" mode=""></image></view>
				<view class="nodata-content"><text>暂无数据哦～</text></view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
import dropChoose from '../../components/drop-choose/drop-choose.vue';
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
export default {
	name: 'homeList',
	components: {
		dropChoose,
		uniLoadMore,
		MescrollUni
	},
	data() {
		return {
			content: '',
			top: '196rpx',
			hasFlag: true,
			status: 'loading',
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			},
			downOption: {
				auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
			},
			isEmpty: false,
			page: 0,
			tab: [
				{
					id: 1,
					name: '区域'
				},
				{
					id: 2,
					name: '售价'
				},
				{
					id: 3,
					name: '房型'
				},
				{
					id: 4,
					name: '面积'
				}
			],
			homeType: '',
			houseType: '',
			homeList: [],
			areaId: '', //小区id
			beginAcreage: '', //最小面积
			beginBuildNum: '', //最小栋座
			beginLevel: '', //最小楼层
			beginPrice: '', //最低价
			endAcreage: '', //最大面积
			endBuildNum: '', //最大栋座
			endLevel: '', //最大楼层
			endPrice: '', //最高价
			province: '', //区域
			roomNum: '', //房号
			room1: '', //房型（室）
			beginUnitPrice: '', //最低单价
			endUnitPrice: '' ,//最高单价
			area:'',
			city:'',
			isAdmin:false
		};
	},
	methods: {
		// 设置标题
		setTitle() {
			if (this.homeType == 1) {
				uni.setNavigationBarTitle({
					title: '二手房'
				});
			}
			if (this.homeType == 2) {
				uni.setNavigationBarTitle({
					title: '新房'
				});
			}
			if (this.homeType == 3) {
				uni.setNavigationBarTitle({
					title: '租房'
				});
			}
			if (this.homeType == 4) {
				uni.setNavigationBarTitle({
					title: '下吕浦'
				});
			}
		},
		// 获取二手房列表
		async getOnlyEntrust() {
			if (!this.hasFlag) return; // 说明已经没有更多
			this.page = ++this.page;
			let res = await this.$fetch(
				this.$api.oldHouseCondition2,
				{
					areaId: this.areaId,
					beginAcreage: this.beginAcreage,
					beginBuildNum: this.beginBuildNum,
					beginLevel: this.beginLevel,
					beginPrice: this.beginPrice,
					endAcreage: this.endAcreage,
					endBuildNum: this.endBuildNum,
					endLevel: this.endLevel,
					endPrice: this.endPrice,
					pageNum: this.page,
					entrust: 2,
					province: this.province,
					roomNum: this.roomNum,
					houseName: this.content,
					room1: this.room1,
					pageSize: 10
				},
				'GET'
			);
			res.rows.forEach(item => {
				if (item.picUrl) {
					item.picUrl = item.picUrl.split(',');
				}
				if (item.label) {
					item.label = item.label.split(',');
				}
			});
			if (res.total) {
				this.isEmpty = false;
			} else {
				this.isEmpty = true;
			}
			this.homeList = [...this.homeList, ...res.rows];
			this.hasFlag = 10 * this.page < res.total;
			if (!this.hasFlag) {
				this.status = 'noMore';
			}
		},
		// 获取新房列表
		async getNewHouseList() {
			if (!this.hasFlag) return; // 说明已经没有更多
			this.page = ++this.page;
			let res = await this.$fetch(
				this.$api.areaCondition,
				{
					beginAcreage: this.beginAcreage,
					beginUnitPrice: this.beginUnitPrice,
					endAcreage: this.endAcreage,
					endUnitPrice: this.endUnitPrice,
					pageNum: this.page,
					province: this.province,
					areaName: this.content,
					room1: this.room1,
					pageSize: 10
				},
				'GET'
			);
			res.rows.forEach(item => {
				if (item.picUrl) {
					item.picUrl = item.picUrl.split(',');
				}
				if (item.label) {
					item.label = item.label.split(',');
				}
			});
			if (res.total) {
				this.isEmpty = false;
			} else {
				this.isEmpty = true;
			}
			this.homeList = [...this.homeList, ...res.rows];
			this.hasFlag = 10 * this.page < res.total;
			if (!this.hasFlag) {
				this.status = 'noMore';
			}
		},
		// 获取租房列表
		async getOldHouseList() {
			if (!this.hasFlag) return; // 说明已经没有更多
			this.page = ++this.page;
			let res = await this.$fetch(
				this.$api.oldHouseCondition1,
				{
					beginAcreage: this.beginAcreage,
					beginBuildNum: this.beginBuildNum,
					beginLevel: this.beginLevel,
					beginRental: this.beginUnitPrice,
					endAcreage: this.endAcreage,
					endBuildNum: this.endBuildNum,
					endLevel: this.endLevel,
					endRental: this.endUnitPrice,
					pageNum: this.page,
					province: this.province,
					roomNum: this.roomNum,
					houseName: this.content,
					room1: this.room1,
					pageSize: 10
				},
				'GET'
			);
			res.rows.forEach(item => {
				if (item.picUrl) {
					item.picUrl = item.picUrl.split(',');
				}
				if (item.label) {
					item.label = item.label.split(',');
				}
			});
			if (res.total) {
				this.isEmpty = false;
			} else {
				this.isEmpty = true;
			}
			this.homeList = [...this.homeList, ...res.rows];
			this.hasFlag = 10 * this.page < res.total;
			if (!this.hasFlag) {
				this.status = 'noMore';
			}
		},
		// 加载更多
		loadMore() {
			if (this.hasFlag) {
				if (this.houseType == 1) {
					this.getOnlyEntrust();
				} else if (this.houseType == 2) {
					this.getNewHouseList();
				} else if (this.houseType == 3) {
					this.getOldHouseList();
				}
			} else {
				this.status = 'noMore';
			}
		},
		// 下拉刷新
		downCallback(mescroll) {
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
			mescroll.endSuccess();
		},
		// 区域选择
		regionChoose(data) {
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			this.province = data;
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
		},
		// 售价选择
		priceChoose(data) {
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			if (this.houseType == 1) {
				this.beginPrice = data[0];
				this.endPrice = data[1];
			} else {
				this.beginUnitPrice = data[0];
				this.endUnitPrice = data[1];
			}
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
		},
		// 房型选择
		typeChoose(data) {
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			this.room1 = data;
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
		},
		// 面积选择
		sizeChoose(data) {
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			this.beginAcreage = data[0];
			this.endAcreage = data[1];
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
		},
		// 搜索
		searchHome() {
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
		},
		// 清空搜索内容
		clear() {
			this.content = '';
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
		},
		// 更多选择
		moreChoose(data) {
			this.beginBuildNum = data[0];
			this.endBuildNum = data[1];
			this.beginLevel = data[2];
			this.endLevel = data[3];
			this.roomNum = data[4];
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading';
			this.homeList = [];
			if (this.houseType == 1) {
				this.getOnlyEntrust();
			} else if (this.houseType == 2) {
				this.getNewHouseList();
			} else if (this.houseType == 3) {
				this.getOldHouseList();
			}
		},
		// 查看房源详情
		checkDetail(id){
			if(this.houseType == 1){
				uni.navigateTo({
					url:'../oldHouse/oldHouse?houseId='+id+'&houseType=2'
				})
			}else if(this.houseType == 3){
				uni.navigateTo({
					url:'../oldHouse/oldHouse?houseId='+id+'&houseType=1'
				})
			}else if(this.houseType == 2){
				uni.navigateTo({
					url:'../newHouse/newHouse?houseId='+id+'&houseType=3'
				})
			}
		},
		// 地图找房
		goMapSearch(){
			uni.navigateTo({
				url:'../mapSearch/mapSearch'
			})
		}
	},
	onLoad(options) {
		this.homeType = options.id;
		if (this.homeType == 4) {
			this.houseType = 1;
			this.area = '330302'
			this.city = '33030201'
			this.province = '33030201'
		} else {
			this.houseType = options.id;
		}
		this.setTitle();
	},
	onShow() {
		if (this.houseType == 1) {
			this.getOnlyEntrust();
		} else if (this.houseType == 2) {
			this.getNewHouseList();
		} else if (this.houseType == 3) {
			this.getOldHouseList();
		}
		if(uni.getStorageSync('isAdmin')){
			this.isAdmin = uni.getStorageSync('isAdmin')
			if(this.isAdmin){
				this.tab =  [{id: 1,name: '区域'}, {id: 2,name: '售价'}, {id: 3,name: '房型'}, 
				{id: 4,name: '面积'},{id:5,name:'更多'}]
			}else{
				this.tab = [{id: 1,name: '区域'}, {id: 2,name: '售价'}, {id: 3,name: '房型'}, {id: 4,name: '面积'}]
			}
		}
	}
};
</script>

<style lang="scss">
.header {
	width: 100%;
	background: #ffffff;
	position: fixed;
	top: 0;
	height: 196rpx;
	z-index: 99;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.06);
}
.search-bar {
	width: 100%;
	height: 106rpx;
	display: flex;
	flex-direction: row;
	position: fixed;
	top: 0;
	background: #ffffff;
	z-index: 99;
}

.search-input {
	width: 610rpx;
	height: 72rpx;
	border-radius: 8rpx;
	background: #f1f2f4;
	display: flex;
	flex-direction: row;
	margin-left: 30rpx;
	align-items: center;
	margin-top: 18rpx;
}

.search-icon {
	margin-left: 30rpx;
	margin-right: 10rpx;
	width: 28rpx;
	height: 28rpx;
	display: flex;
	align-items: center;
}

.search-icon image {
	width: 28rpx;
	height: 28rpx;
}

.search-content {
	color: #a6a6a6;
	font-size: 24rpx;
	letter-spacing: 0.28rpx;
	margin-top: 5rpx;
	width: 486rpx;
}
.close-icon {
	margin-right: 20rpx;
	width: 36rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
}
.close-icon image {
	width: 36rpx;
	height: 36rpx;
}
.findHome {
	margin-left: 30rpx;
	margin-top: 18rpx;
	width: 50rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}
.homeList {
	width: 100%;
	background: #ffffff;
	// margin-top:266rpx;
	.home-info {
		display: flex;
		flex-direction: row;
		margin-left: 30rpx;
		// padding-top: 40rpx;
		height: 250rpx;
		// padding-bottom: 30rpx;
		border-bottom: 2rpx solid #f7f7f7;
	}
}

.home-pic {
	width: 240rpx;
	height: 180rpx;
	margin-right: 30rpx;
	margin-top: 40rpx;
	border-radius: 4rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url('https://img.bajiaostar.com/FnwyfqiIK3_RD5UR1k66KQ_y0VFx');
}

.home-pic image {
	width: 240rpx;
	height: 180rpx;
	border-radius: 4rpx;
}

.home-detail {
	margin-top: 40rpx;
	display: flex;
	flex-direction: column;

	.homeName {
		width: 420rpx;
		font-size: 28rpx;
		color: #5b5b5b;
		text-align: justify;
		letter-spacing: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: bold;
	}

	.home-address {
		width: 420rpx;
		font-size: 24rpx;
		color: #a6a6a6;
		letter-spacing: 0;
		text-align: justify;
		margin-top: 8rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.home-tips {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
		height: 36rpx;

		.tips-1 {
			background: rgba(241, 78, 44, 0.15);
			border-radius: 8rpx;
			font-size: 20rpx;
			color: #f14e2c;
			letter-spacing: 0;
			text-align: justify;
			margin-right: 30rpx;
			height: 36rpx;
			line-height: 36rpx;
		}

		.tips-2 {
			background: rgba(74, 144, 226, 0.15);
			border-radius: 8rpx;
			font-size: 20rpx;
			color: #4a90e2;
			letter-spacing: 0;
			text-align: justify;
			margin-right: 30rpx;
			height: 36rpx;
			line-height: 36rpx;
		}

		.tips-3 {
			background: rgba(211, 160, 221, 0.15);
			border-radius: 8rpx;
			font-size: 20rpx;
			color: #800080;
			letter-spacing: 0;
			text-align: justify;
			height: 36rpx;
			line-height: 36rpx;
		}
		.tips4 {
			background: #48d2ab;
			border-radius: 8rpx;
			font-size: 20rpx;
			color: #ffffff;
			letter-spacing: 0;
			text-align: justify;
			margin-right: 30rpx;
			height: 36rpx;
			line-height: 36rpx;
		}

		.tips5 {
			background: rgba(74, 144, 226, 0.15);
			border-radius: 8rpx;
			font-size: 20rpx;
			color: #4a90e2;
			letter-spacing: 0;
			text-align: justify;
			margin-right: 30rpx;
			height: 36rpx;
			line-height: 36rpx;
		}
	}

	.home-price {
		font-size: 28rpx;
		color: #fe9e2e;
		letter-spacing: 0;
		text-align: justify;
		font-size: 24rpx;
		margin-top: 12rpx;
	}
}

.tips-1 text {
	margin: 0 10rpx;
}

.tips-2 text {
	margin: 0 10rpx;
}

.tips-3 text {
	margin: 0 10rpx;
}
.tips4 text {
	margin: 0 10rpx;
}
.tips5 text {
	margin: 0 10rpx;
}
.noData {
	background: #ffffff;
	width: 100%;
	display: flex;
	flex-direction: column;

	.nodata-img {
		width: 100%;
		height: 325.6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;

		image {
			width: 300rpx;
			height: 325.6rpx;
		}
	}

	.nodata-content {
		width: 100%;
		margin-top: 40.4rpx;
		font-size: 24rpx;
		color: #a6a6a6;
		text-align: center;
	}
}
</style>
